⚡ 30 秒速记

• 高阶组件包装能力，渲染属性交出展示选择
• 自定义钩子复用状态逻辑，组合组件复用界面
• 复用逻辑不等于共享同一份状态
• 属性冲突、身份稳定和嵌套成本要考虑
• 模式服务变化边界，不为名称增加抽象

设计模式的作用，是把经常一起变化的事情放在一起，把变化不同的事情分开。 高阶组件可以统一包裹能力，渲染属性让调用方决定如何显示，自定义钩子则直接复用有状态逻辑。选哪种取决于使用方需要什么接口以及是否要兼容类组件。不要为了复用硬塞所有差异，更要注意包装带来的属性冲突、组件身份和调试层级。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

高阶组件（HOC）：最经典的组件逻辑复用方式

什么是高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。——React 官方

高阶函数的概念：接收函数作为输入，或者输出另一个函数的一类函数，就是高阶函数。

相应的，高阶组件指的就是参数为组件，返回值为新组件的函数。没错，高阶组件本质上是一个函数。下面是一个简单的高阶组件示例：

const withProps = (WrappedComponent) => {
    const targetComponent = (props) => (
        <div className="wrapper-container">
            <WrappedComponent {...props} />
        </div>
    );
    return targetComponent;
};

在这段代码中，withProps 就是一个高阶组件。

高阶组件是如何实现逻辑复用的？

现在我们考虑这样一种情况：我有一个名为 checkUserAccess 的方法，这个方法专门用来校验用户的身份是否合法，若不合法，那么一部分组件就要根据这个不合法的身份调整自身的展示逻辑（比如查看个人信息界面需要提示“请校验身份”等）。

假如说页面中的 A、B、C、D、E 五个组件都需要甄别用户身份是否合法，那么这五个组件在理论上都需要先请求一遍 checkUserAccess 这个接口。但一个一个对组件进行修改未免太麻烦了，我们期望对“获取 checkUserAccess 接口信息，并通知到对应组件”这层逻辑进行复用，这时候就可以请出高阶组件来帮忙了。

我们可以像下面代码这样在高阶组件中定义这层通用的逻辑：

// 假设 checkUserAccess 已经在 utils 文件中被封装为了一段独立的逻辑
import checkUserAccess from './utils
// 用高阶组件包裹目标组件
const withCheckAccess = (WrappedComponent) => {
    // 这部分是通用的逻辑：判断用户身份是否合法
    const isAccessible = checkUserAccess()  
    // 将 isAccessible（是否合法） 这个信息传递给目标组件
    const targetComponent = (props) => (
        <div className="wrapper-container">
            <WrappedComponent {...props} isAccessible={isAccessible} />
        </div>
    );
    return targetComponent;
};